<template>
  <div class="api-table">
    <el-table :data="page.data"
              :loading="page.isLoading"
              row-class-name="table-row"
              :row-key="params && params.rowKey ? params.rowKey : null"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
              @cell-mouse-enter="cellMouseenter"
              @cell-mouse-leave="cellMouseLeave"
              @selection-change="handleSelectionChange"
              element-loading-text="加载中...">
      <slot />
      <template slot="empty">
        <img style="height: 200px;" src="../images/uiImages/none-data.png" alt="">
        <p style="margin-top: -55px" class="fontSize14">暂无数据</p>
      </template>
    </el-table>
    <el-pagination layout="total, sizes, prev, pager, next, jumper"
                   class="wisdom-pagination"
                   popper-class="wisdom-popper-class-new"
                   v-if="page.total"
                   :current-page="page.current"
                   :page-size="page.size"
                   :total="page.total"
                   @current-change="load($event)"
                   @size-change="load(1, $event)" />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ApiTable',
  props: {
    api: Function,
    params: {
        type:Object,
        required: false,
        default: function () {
            return {};
        }
    }
  },
  data() {
    return {
      page: {
        isLoading: false,
        data: [],
        current: 1,
        size: 10,
        total: 0
      }
    }
  },
  methods: {
    /**
         * @param {number} page
         * @param {number|undefined} size
         * @returns {Promise<void>}
         */
    load(page, size) {
      this.page.isLoading = true
      size = size || this.page.size
      page = page || this.page.current
      const params = {}
      for (const key in this.params) {
        const value = this.params[key]
        if (value && value !== null && value !== '' && value !== undefined) {
          params[key] = value
        }
      }
      // Object.assign(params, this.params)
      params.page = page
      params.pageSize = size
      return this.api(params)
        .then((response) => {
          this.page.current = page
          this.page.size = size
          this.page.data = response.data.records || response.data.list || response.data
          this.page.total = response.data.total
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => this.page.isLoading = false)
    },
      handleSelectionChange(value){
          this.$emit("selectionData",value)
      },
      cellMouseenter(row, column, cell, event){
          this.$emit("cellMouseenterHover",row)
      },
      cellMouseLeave(row){
          this.$emit("cellMouseLeaveHover",row)
      }
  }
})
</script>

<style scoped>
.api-table {

}

.el-table {
  border-radius: 8px 8px 0 0;
  margin-bottom: 16px;
}

.el-table :deep thead tr th {
  background: #F4F4F4;
  color: #909399;
}

.el-table :deep tbody tr td {
  color: #606266;
}

.api-table .el-table :deep tbody tr:hover td {
  background-color: #FEF9F0;
}

.el-pagination {
  display: flex;
  padding: 8px;
}

.el-pagination :deep .el-pagination__sizes {
  margin-right: auto;
}

:deep .wisdom-pagination .el-pager li.active{
    color: #EFD9AF;
}

:deep .wisdom-pagination .el-pager li.active{
    color: #EFD9AF;
}

:deep .wisdom-pagination .btn-next:hover,.btn-prev:hover{
    color: #EFD9AF;
}

:deep .wisdom-pagination .el-pager li:hover{
    color: #DDB15C;
}


:deep .wisdom-pagination .el-pager li.active:hover{
    color: #EFD9AF;
}

</style>
